<script setup lang="tsx">
import { ref, onMounted } from "vue";
import ReCol from "@/components/ReCol";
import { FormProps } from "../utils/types";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ep/plus";
import { getBrandList } from "@/api/basic";

/**
 * 表单字段初始化
 */
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    orderNo: "",
    purchasingUnit: "",
    purchasingDept: "",
    purchaser: "",
    purchaserPhone: "",
    receiver: "",
    receiverPhone: "",
    receiverAddress: "",
    orderTime: "",
    productList: []
  })
});
const ruleFormRef = ref();
const formRules = ref();
const newFormInline = ref(props.formInline);
const tableColumns: TableColumnList = [
  {
    label: "商品编号",
    prop: "goodCode",
    cellRenderer: ({ row }) => <el-input v-model={row.goodCode} />
  },
  {
    label: "商品名称",
    prop: "goodName",
    cellRenderer: ({ row }) => <el-input v-model={row.goodName} />
  },
  {
    label: "品牌",
    prop: "brand",
    cellRenderer: ({ row }) => (
      <el-select
        filterable
        allow-create
        v-model={row.brand}
        placeholder="请选择品牌"
        style="width: 100%"
      >
        {bandList.value.map(item => (
          <el-option label={item} value={item} />
        ))}
      </el-select>
    )
  },
  {
    label: "规格",
    prop: "spec",
    cellRenderer: ({ row }) => <el-input v-model={row.spec} />
  },
  {
    label: "单价",
    prop: "price",
    cellRenderer: ({ row }) => <el-input v-model={row.price} type="number" />
  },
  {
    label: "数量",
    prop: "quantity",
    cellRenderer: ({ row }) => <el-input v-model={row.quantity} type="number" />
  },
  {
    label: "单位",
    prop: "unit",
    cellRenderer: ({ row }) => <el-input v-model={row.unit} />
  }
];

const bandList = ref([]);
const getBrandListData = async () => {
  try {
    const res = await getBrandList();
    console.log("商品列表数据:", res);
    bandList.value = res.data.list;
  } catch (error) {
    console.error("获取商品列表失败", error);
  }
};

/**
 * 获取表单引用
 */
function getRef() {
  return ruleFormRef.value;
}

/** 新增商品 */
function onAdd() {
  newFormInline.value.productList.push({
    goodCode: "",
    goodName: "",
    brand: "",
    spec: "",
    price: null,
    quantity: null,
    unit: ""
  });
}

/**
 * 对外暴露组件方法
 */
defineExpose({ getRef });

onMounted(() => {
  getBrandListData();
});
</script>

<!-- 新增订单信息弹窗组件 -->
<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <!-- 基础信息 -->
    <el-row :gutter="30">
      <re-col :value="8" :xs="24" :sm="24">
        <el-form-item label="订单号" prop="orderNo">
          <el-input
            v-model="newFormInline.orderNo"
            clearable
            placeholder="请输入订单号"
          />
        </el-form-item>
      </re-col>

      <re-col :value="8" :xs="24" :sm="24">
        <el-form-item label="订单时间" prop="orderTime">
          <el-date-picker
            v-model="newFormInline.orderTime"
            type="datetime"
            clearable
            placeholder="请选择订单时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
      </re-col>

      <re-col :value="8" :xs="24" :sm="24">
        <el-form-item label="采购单位" prop="purchasingUnit">
          <el-input
            v-model="newFormInline.purchasingUnit"
            clearable
            placeholder="请输入采购单位"
          />
        </el-form-item>
      </re-col>
    </el-row>

    <el-row :gutter="30">
      <re-col :value="8" :xs="24" :sm="24">
        <el-form-item label="采购部门" prop="purchasingDept">
          <el-input
            v-model="newFormInline.purchasingDept"
            clearable
            placeholder="请输入采购部门"
          />
        </el-form-item>
      </re-col>

      <re-col :value="8" :xs="24" :sm="24">
        <el-form-item label="采购人" prop="purchaser">
          <el-input
            v-model="newFormInline.purchaser"
            clearable
            placeholder="请输入采购人"
          />
        </el-form-item>
      </re-col>

      <re-col :value="8" :xs="24" :sm="24">
        <el-form-item label="采购电话" prop="purchaserPhone">
          <el-input
            v-model="newFormInline.purchaserPhone"
            clearable
            placeholder="请输入采购人电话"
          />
        </el-form-item>
      </re-col>
    </el-row>

    <el-row :gutter="30">
      <re-col :value="8" :xs="24" :sm="24">
        <el-form-item label="收货人" prop="receiver">
          <el-input
            v-model="newFormInline.receiver"
            clearable
            placeholder="请输入收货人"
          />
        </el-form-item>
      </re-col>

      <re-col :value="8" :xs="24" :sm="24">
        <el-form-item label="收货电话" prop="receiverPhone">
          <el-input
            v-model="newFormInline.receiverPhone"
            clearable
            placeholder="请输入收货人电话"
          />
        </el-form-item>
      </re-col>
      <re-col :value="8" :xs="24" :sm="24">
        <el-form-item label="收货地址" prop="receiverAddress">
          <el-input
            v-model="newFormInline.receiverAddress"
            clearable
            placeholder="请输入收货地址"
          /> </el-form-item
      ></re-col>
    </el-row>

    <!-- 商品列表 -->
    <pure-table :columns="tableColumns" :data="newFormInline.productList">
      <template #append>
        <el-button
          plain
          class="w-full my-2!"
          :icon="useRenderIcon(AddFill)"
          @click="onAdd()"
        >
          添加一行数据
        </el-button>
      </template>
    </pure-table>
  </el-form>
</template>
